<div id="object-header" class="card">
  <div class="card-header d-flex justify-content-between">
    <div>
      <div *permissionLink="'base.framework.object.edit'" class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input active-control" id="object-view-active"
               (change)="toggleChange()" [checked]="activeState">
        <label class="custom-control-label" for="object-view-active"></label>
      </div>
    </div>
    <div id="object-view-title">
      <cmdb-active-badge [activeStatus]="activeState"></cmdb-active-badge>
      {{renderResult?.type_information?.type_label}} #{{renderResult?.object_information?.object_id}}
    </div>
    <div id="object-view-version">Version: {{renderResult?.object_information?.version}}</div>
  </div>
  <div class="card-body">
    <ul id="object-header-tabs" class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#summaries-tab" role="tab">Summaries</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#meta-tab" role="tab">Metadata</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="qr-cube-tab" data-toggle="tab" href="#qr-tab" role="tab">QR code</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="summaries-tab" role="tabpanel">
        <cmdb-object-summary [renderResult]="renderResult" [summaries]="renderResult?.summaries"></cmdb-object-summary>
      </div>
      <div class="tab-pane fade" id="meta-tab" role="tabpanel">
        <cmdb-object-view-meta [renderResult]="renderResult"></cmdb-object-view-meta>
      </div>
      <div class="tab-pane fade" id="qr-tab" role="tabpanel">
        <cmdb-object-qr></cmdb-object-qr>
      </div>
    </div>
  </div>
</div>
